define(['jquery', 'bootstrap', 'frontend', 'form', 'table', 'template', 'jsgrid', 'gridLayout-master/Grid'], function ($, undefined, Frontend, Form, Table, Template, Jsgrid, undefined) {
    var validatoroptions = {
        invalid: function (form, errors) {
            $.each(errors, function (i, j) {
                Layer.msg(j);
            });
        }
    };
    var Controller = {
        index: function () {
            //setInterval(function () {
            //    window.location.reload();
            //}, 6000000);//100分钟刷新一次

            Controller.api.bindevent();
        },
        selecttype: function () {

            Controller.api.bindevent();
        },
        button1: function () {

            $("#imagea").hide();
            $("#searchimage").click(function (e) {
                var name = $("#imagename").val();
                var url = 'thmpc/searchimage?name=' + name;
                console.log(url);
                Frontend.api.ajax({
                    url: url,
                }, function (data, ret) {
                    console.log(data);
                    //$("#imageone").attr("src", data);
                    //$("#imagea").attr("href", data);
                    //$("#imagea").attr("target", "_blank");
                    //location.href = 'showpic?picurl=' + data;

                    $("#imageone").attr("src", data);
                    $("#imageone").show();
                    return false;
                }, function (data, ret) {
                    //$("#imageone").attr("src", "");
                    //$("#imagea").attr("href", "javascript:;");
                    //$("#imagea").attr("target", "");
                    //查询错误
                    Layer.confirm(ret.msg, {
                        icon: 2,
                        title:'',
                        btn: [] //按鈕
                    }, function (index) {
                        Layer.closeAll();
                        return true;
                    });

                    $("#imagea").show();
                    return false;
                });
            });

            Controller.api.bindevent();
        },
        button2: function () {
            $("#plupload-a3_image7").data("upload-complete", function(data, ret){
                //这里进行后续操作
                console.log("plupload-a3_image7");
            });
            $("#plupload-a3_image8").data("upload-complete", function(data, ret){
                //这里进行后续操作
                console.log("plupload-a3_image8");
            });

            Controller.api.bindevent();
        },
        button3: function () {
            Controller.api.bindevent();
        },
        sqy: function () {
            $(document).on("click", "#dd_btn", function () {
                var x = $("#edit-form").serializeArray();
                var row = new Array();
                $.each(x, function (i, field) {
                    row[field.name] = field.value;
                });
                if (row['aqm'] !== Config.thmappaqm) {
                    Frontend.api.toastr.error("安全碼错误!");
                    return;
                }
                Frontend.api.ajax({
                    url: 'thmpc/sqy',
                    data: {
                        aqm: row['aqm']
                    },
                }, function () {
                    window.location.href= "/index/thm/index";
                });

            });

            Controller.api.bindevent();
        },
        test4: function () {
            function drawgrid() {
                var c_canvas = document.getElementById("grids");
                drawSmallGrid(c_canvas);
                drawMediumGrid(c_canvas);
                drawBigGrid(c_canvas);
                return;
            }

            function drawSmallGrid(c_canvas) {
                ctx = c_canvas.getContext("2d");
                ctx.strokeStyle = "#f1dedf";
                ctx.strokeWidth = 1;
                ctx.beginPath();
                for (var x = 0.5; x < 750; x += 3) {
                    ctx.moveTo(x, 0);
                    ctx.lineTo(x, 750);
                    ctx.stroke();
                }
                for (var y = 0.5; y < 750; y += 3) {
                    ctx.moveTo(0, y);
                    ctx.lineTo(750, y);
                    ctx.stroke();
                }
                ctx.closePath();
                return;
            }

            function drawMediumGrid(c_canvas){
                ctx = c_canvas.getContext("2d");
                ctx.strokeStyle="#fdbeb9";
                ctx.strokeWidth = 2
                //宽度是小网格的2倍
                ctx.beginPath();
                for(var x=0.5;x<750;x+=15){
                    ctx.moveTo(x,0);
                    ctx.lineTo(x,750);
                    ctx.stroke();
                }
                for(var y=0.5;y<750;y+=15){
                    ctx.moveTo(0,y);
                    ctx.lineTo(750,y);
                    ctx.stroke();
                }
                ctx.closePath();
                return;
            }

            function drawBigGrid(c_canvas) {
                ctx = c_canvas.getContext("2d");
                ctx.strokeStyle = "#e0514b";
                ctx.strokeWidth = 3;
                ctx.beginPath();
                for (var x = 0.5; x < 750; x += 75) {
                    ctx.moveTo(x, 0);
                    ctx.lineTo(x, 750);
                    ctx.stroke();
                }
                for (var y = 0.5; y < 750; y += 75) {
                    ctx.moveTo(0, y);
                    ctx.lineTo(750, y);
                    ctx.stroke();
                }
                ctx.closePath();
                return;
            }

            //drawgrid();
            drawgridX();

            //画网格--用画的最好
            function drawgridX() {
                var canvas = document.getElementById("grids");
                var ctx = canvas.getContext("2d");
                //描绘背景
                var gradient = ctx.createLinearGradient(0, 0, 0, 300);//createLinearGradient() 方法创建线性的渐变对象。
                gradient.addColorStop(0, "#e0e0e0");
                gradient.addColorStop(1, "#ffffff");
                ctx.fillStyle = gradient;
                ctx.fillRect = (0, 0, canvas.width, canvas.height);
                //描绘边框
                var grid_cols = 10;
                var grid_rows = 10;
                var cell_height = canvas.height / grid_rows;
                var cell_width = canvas.width / grid_cols;
                ctx.lineWidth = 1;
                ctx.strokeStyle = "#a0a0a0";
                //结束边框描绘
                ctx.beginPath();
                //准备画横线
                for (var col = 0; col <= grid_cols; col++) {
                    var x = col * cell_width;
                    ctx.moveTo(x, 0);
                    ctx.lineTo(x, canvas.height);
                }
                //准备画竖线
                for (var row = 0; row <= grid_rows; row++) {
                    var y = row * cell_height;
                    ctx.moveTo(0, y);
                    ctx.lineTo(canvas.width, y);
                }
                //完成描绘
                ctx.stroke();

            }



        },
        test3: function () {
            var grid = new Grid({
                container:document.getElementsByClassName('grid')[0],// 必须项
                colCount:50,
                rowCount:50,
                width:500,
                height:500,
            });
            grid.setGridStyleByIndex(0, {"background": "red"});
            grid.setGridStyleByIndex(6, {"background": "green"});
            grid.setGridStyleByIndex(12, {"background": "yellow"});
            grid.setGridStyleByIndex(18, {"background": "blue"});
            grid.setGridStyleByIndex(24, {"background": "orange"});
            var grids = grid.getGrids();
            for(var i = 0; i < grids.length; i++){
                //grids[i].innerHTML = i + 1;
            }
            //console.log(grid.getGrids());
        },
        test2: function () {
            var clients = [
                { "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
                { "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
                { "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
                { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
                { "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
            ];

            var countries = [
                { Name: "", Id: 0 },
                { Name: "United States", Id: 1 },
                { Name: "Canada", Id: 2 },
                { Name: "United Kingdom", Id: 3 }
            ];

            $("#jsGrid").jsGrid({
                width: "100%",
                height: "400px",

                inserting: true,
                editing: true,
                sorting: true,
                paging: true,

                data: clients,

                fields: [
                    { name: "Name", type: "text", width: 150, validate: "required" },
                    { name: "Age", type: "number", width: 50 },
                    { name: "Address", type: "text", width: 200 },
                    { name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name" },
                    { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
                    { type: "control" }
                ]
            });
        },
        test: function () {

            var drawing1 = document.getElementById("drawing1");
//贴图
            if (drawing1.getContext) {
                var context1 = drawing1.getContext("2d");
                var imageElem = document.getElementById("result");
                context1.drawImage(imageElem, 0, 0, 300, 300);
            }

            /**
             *15.2 2D上下文
             */
//15.2.1 填充和描边
//15.2.2 绘制矩形
            var drawing2 = document.getElementById("drawing2");
            if (drawing2.getContext) {
                var context2 = drawing2.getContext("2d");
                //绘制矩形
                context2.fillStyle = "#ff0000";
                context2.fillRect(10, 10, 50, 50);
                //绘制半透明的蓝色矩形
                context2.fillStyle = "rgba(0,0,255,0.5)";
                context2.fillRect(50, 50, 50, 50);
                //绘制红色描边矩形
                context2.strokeStyle = "#ff0000";
                context2.strokeRect(130, 10, 50, 50);
                //绘制半透明的蓝色描边矩形
                context2.strokeStyle = "rgba(0,0,255,0.5)";
                context2.strokeRect(130, 70, 50, 50);
                //描边线条的属性有lineWidth、lineCap、lineJoin
                context2.lineWidth = 2;
                //在两个矩形重叠的地方清除一个小矩形
                context2.clearRect(50, 50, 10, 10);
            }
//15.2.3 绘制路径
//15.2.4 绘制文本
//15.2.5 变换
//绘制一个时钟表盘：
            var drawing3 = document.getElementById("drawing3");
            if (drawing3.getContext) {
                var context3 = drawing3.getContext("2d");
                //开始路径
                context3.beginPath();
                //绘制外圆
                context3.arc(100, 100, 99, 0, 2 * Math.PI, false);
                //绘制内圆
                context3.moveTo(194, 100);
                context3.arc(100, 100, 94, 0, 2 * Math.PI, false);
                //绘制文本
                context3.font = "bold 14px Arial";
                context3.textAlign = "center";
                context3.textBaseline = "middle";
                context3.fillText("12", 100, 20);
                context3.fillText("3", 180, 100);
                context3.fillText("6", 100, 180);
                context3.fillText("9", 20, 100);
                //变换原点
                context3.translate(100, 100);
                //旋转表针
                context3.rotate(1);
                //绘制分针
                context3.moveTo(0, 0);
                context3.lineTo(0, -85);
                //绘制时针
                context3.moveTo(0, 0);
                context3.lineTo(-65, 0);
                //描边路径
                context3.stroke();
            }
//15.2.6 绘制图像
//15.2.7 阴影
            var context4 = document.getElementById("drawing4").getContext("2d");
//设置阴影
            context4.shadowOffsetX = 5;
            context4.shadowOffsetY = 5;
            context4.shadowBlur = 4;
            context4.shadowColor = "rgba(0,0,0,0.5)";
//绘制红色矩形
            context4.fillStyle = "#ff0000";
            context4.fillRect(10, 10, 50, 50);
//绘制蓝色矩形
            context4.fillStyle = "rgba(0,0,255,1)";
            context4.fillRect(30, 30, 50, 50);
//15.2.8 渐变
            var context5 = document.getElementById("drawing5").getContext("2d");
            var gradient = context5.createLinearGradient(30, 30, 70, 70);
            gradient.addColorStop(0, "white");
            gradient.addColorStop(1, "black");
//绘制红色矩形
            context5.fillStyle = "#ff0000";
            context5.fillRect(10, 10, 50, 50);
//绘制渐变矩形
            context5.fillStyle = gradient;
            context5.fillRect(30, 30, 50, 50);
//15.2.9 模式
            var context6 = document.getElementById("drawing6").getContext("2d");
            var imageEle = document.getElementById("result");
            var pattern = context6.createPattern(imageEle, "repeat");
//绘制矩形
            context6.fillStyle = pattern;
            context6.fillRect(0, 0, 560, 150);
//15.2.10 使用图像数据
//getImageData()、putImageData()
//15.2.11 合成
//globalAlpha、globalCompositionOperation

        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"), function (data, ret) {
                    //console.log(ret);
                    setTimeout(function () {
                        location.href = ret.url ? ret.url : "/";
                    }, 1000);
                });
            },
            formatter: {//渲染的方法
                zxstatus: function (value, row, index) {
                    //Controller.api.formatter.zxstatus
                    if (value == 0) {
                        return [
                            '<a href="javascript:;" class="bg-red-gradient"> 離線 </a>'
                        ].join("")

                    } else {
                        return [
                            '<a href="javascript:;" class="bg-green"> 在線 </a>'
                        ].join("")
                    }
                },
                onlinetime: function (value, row, index) {
                    var online_starttime = row.online_starttime;
                    var nowtime = new Date().getTime() / 1000;
                    console.log(online_starttime);

                    if (online_starttime > 0) {
                        var s = nowtime - online_starttime;
                        var hour = Math.floor(s / 3600);
                        var min = Math.floor((s - hour * 3600) / 60);
                        var sec = Math.floor(s % 60);
                        var str = hour + " : " + min + " : " + sec;
                        return [
                            '<a href="javascript:;"> ' + str + ' </a>'
                        ].join("")
                    } else {
                        return [
                            '<a href="javascript:;"> -- </a>'
                        ].join("")
                    }
                }
            }
        }
    };
    return Controller;
});